import React, { Component } from 'react'
import { Card, Table, Button, message, Modal } from 'antd'
import table_columns from './table.jsx'
import { Form, Input } from 'antd'
import { list, reqUpdateProductStatus } from '@/api/product-api.js'
const { confirm } = Modal
/**
 * 商品管理
 */
export default class List extends Component {
  state = {
    tableData: [],
    pageNum: 1,
    pageSize: 10,
    pageTotal: 0,
    searchType: null,
    searchName: null,
  }
  /**
   * 详情
   */
  detailProduct(v) {
    this.props.history.push(`/goods/product/detail/${v._id}`)
  }
  editProduct(v) {
    this.props.history.push(`/goods/product/edit/${v._id}`)
  }
  componentDidMount() {
    this.page()
  }
  //状态更新
  updateStatus = (v, status) => {
    const self = this
    confirm({
      title: '修改商品状态',
      content: `您确认要${status == 1 ? '上架' : '下架'}该商品吗？`,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        reqUpdateProductStatus(v._id, status).then((v) => {
          if (v.status == 0) {
            message.success('修改成功')
            self.page()
          } else {
            message.success(v.msg || '修改失败')
          }
        })
      },
      onCancel() {},
    })
  }
  page() {
    list(
      this.state.pageNum,
      this.state.pageSize,
      this.state.searchType,
      this.state.searchName
    ).then((v) => {
      if (v.status === 0) {
        this.setState({
          tableData: v.data.list,
          pageTotal: v.data.total,
        })
      }
    })
  }
  searchFun(e) {
    e.preventDefault()
    for (let el of e.target) {
      if (el.tagName === 'INPUT') console.error('查询', el.name, el.value)
    }
  }
  changePage = (pagination, filters, sorter) => {
    console.error(pagination.current)

    this.setState(
      {
        pageNum: pagination.current,
      },
      () => {
        this.page()
      }
    )
  }
  render() {
    const extra = (
      <Button
        icon="plus"
        type="primary"
        onClick={() => this.props.history.push('/goods/product/edit/1')}
      >
        添加
      </Button>
    )
    const search = (
      <Form layout="inline" onSubmit={this.searchFun}>
        <Form.Item>
          <Input name="name" placeholder="产品名称" />
        </Form.Item>
        <Form.Item>
          <Input name="keys" placeholder="关键字" />
        </Form.Item>
        <Form.Item>
          <Button icon="search" type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>
    )
    return (
      <Card
        title={search}
        style={{ height: '100%', border: 'none' }}
        extra={extra}
      >
        <Table
          bordered
          columns={table_columns(this)}
          pagination={{
            showQuickJumper: true,
            defaultCurrent: this.state.pageNum,
            defaultPageSize: this.state.pageSize,
            total: this.state.pageTotal,
            // showTotal: (total) => `总计${total}页`,
          }}
          onChange={this.changePage}
          loading={this.state.loading}
          dataSource={this.state.tableData}
          rowKey="_id"
        />
      </Card>
    )
  }
}
